<template>
	<div>
		<view class="grace-body">
			<view class="grace-list" style="padding-top:20rpx">
				<view class="grace-list-items"  @click="navigateTo('./account')">
					<view class="grace-list-image ucenter-face grace-relative">
						<image class="grace-list-image ucenter-face-image" :src="face?face:(userInfo.face?userInfo.face:'../../static/face.jpg')" mode="widthFix"></image>
					</view>
					<view class="grace-list-body">
						<view class="grace-list-title">
							<text class="grace-list-title-text">{{userInfo.username?userInfo.username:'请登录'}}</text>
						</view>
						<view class="grace-list-body-desc">{{userInfo.username?'商城VIP':''}}</view>
					</view>
					<text class="grace-list-arrow-right grace-icons icon-arrow-right"></text>
				</view>
			</view>
			<view class="ucenter-line"></view>
			<view>
				<graceBoxBanner @order="goOrder" :items="items"></graceBoxBanner>
			</view>
			<view class="ucenter-line"></view>
			<view class="grace-list grace-margin-top">
				<view class="grace-list-items" @click="navigateTo('./order')">
					<text class="grace-list-icon grace-icons icon-article grace-blue"></text>
					<view class="grace-list-body grace-border-b">
						<view class="grace-list-title">
							<text class="grace-list-title-text">我的订单</text>
							<text class="grace-badge grace-bg-red" v-show="false">0</text>
						</view>
					</view>
					<text class="grace-list-arrow-right grace-icons icon-arrow-right"></text>
				</view> 
				<view class="grace-list-items" @click="navigateTo('./address')">
					<text class="grace-list-icon grace-icons icon-address grace-green"></text>
					<view class="grace-list-body grace-border-b">
						<view class="grace-list-title">
							<text class="grace-list-title-text">收货地址</text>
						</view>
					</view>
					<text class="grace-list-arrow-right grace-icons icon-arrow-right"></text>
				</view>
				<!-- <view class="grace-list-items" @click="navigateTo('./editAccount')">
					<text class="grace-list-icon grace-icons icon-pwd grace-blue-sky"></text>
					<view class="grace-list-body grace-border-b">
						<view class="grace-list-title">
							<text class="grace-list-title-text">修改密码</text>
						</view>
					</view>
					<text class="grace-list-arrow-right grace-icons icon-arrow-right"></text>
				</view> -->
				<view class="grace-list-items" @click="navigateTo('./account')">
					<text class="grace-list-icon grace-icons icon-set grace-yellow"></text>
					<view class="grace-list-body grace-border-b">
						<view class="grace-list-title">
							<text class="grace-list-title-text">账户设置</text>
						</view>
					</view>
					<text class="grace-list-arrow-right grace-icons icon-arrow-right"></text>
				</view>
				<view class="grace-list-items" @click="loginOut" v-if="userInfo.username">
					<text class="grace-list-icon grace-icons icon-share2 grace-red"></text>
					<view class="grace-list-body">
						<view class="grace-list-title">
							<text class="grace-list-title-text">退出登录</text>
						</view>
					</view>
					<text class="grace-list-arrow-right grace-icons icon-arrow-right"></text>
				</view>
			</view>
		</view>
		<foot-bottom></foot-bottom>
		<fab :topBtn="isTopBtn"></fab>
	</div>
</template>
<script>
import gracePage from "@/graceUI/components/gracePage.vue";
import graceBoxBanner from "@/graceUI/components/graceBoxBanner.vue";
import footBottom from '@/components/footBottom'; //公共底部
import fab from '@/components/fab';
import { getAuth,userIndex,userInfo,logout,clearAuth  } from '@/api/user';
export default {
	data() {
		return {
			items: [
                ['0','','全部'],
                ['0','','待付款'],
                ['0','','已付款'],
			],
			isTopBtn:false,
            face:'',
			userInfo:''
		}
	},
	methods: {
        loginOut(){
            uni.showModal({
            	title: '确认提醒',
            	content: '您确定要退出登录吗？',
            	success:(e)=>{
            		if (e.confirm) {
            			logout(this.userInfo.username).then((res)=>{
            			    if(res.data.status==1){
                                clearAuth();
                                uni.reLaunch({
                                    url:'/pages/index/index'
                                });
                            }
            			})
            		}
            	}
            });
        },
		navigateTo(url){
            if(this.userInfo.username){
                uni.navigateTo({
                    url: url
                });
            }else{
                this.goLogin();
            }
		},
        goLogin(){
            uni.navigateTo({
                url: './login'
            });
        },
		goOrder(e){
			uni.navigateTo({
			    url: './order?index='+e
			});
		}
	},
	onLoad(){
        this.userInfo = getAuth()
         if(!this.userInfo.username){
            userIndex(this.userInfo.username).then((res)=>{
                 if(res.data.status==1){ 
                     let userData = res.data.datas
                     this.items=[];
                     this.items.push([userData.ordersNum.allOrders,'','全部'])
                     this.items.push([userData.ordersNum.unpaidOrders,'','待付款'])
                     this.items.push([userData.ordersNum.paidOrders,'','已付款'])
                     userInfo(this.userInfo.username).then((res)=>{
                         if(res.data.status==1){
                            this.face = res.data.datas.face;
                         }
                     })
                 }
             })
         }
	},
    onShow(){
		 this.userInfo = getAuth()
        if(this.userInfo.username){
            userIndex(this.userInfo.username).then((res)=>{
                if(res.data.status==1){
                    let userData = res.data.datas
                    this.items=[];
                    this.items.push([userData.ordersNum.allOrders,'','全部'])
                    this.items.push([userData.ordersNum.unpaidOrders,'','待付款'])
                    this.items.push([userData.ordersNum.paidOrders,'','已付款'])
                    userInfo(this.userInfo.username).then((res)=>{
                        if(res.data.status==1){
                           this.face = res.data.datas.face;
                        }
                    })
                }else{
					clearAuth();
				}
            })
        }
    }, 
	components:{
		gracePage, 
		graceBoxBanner,
		footBottom,
		fab
	},
	onPageScroll(e){
		if(e.scrollTop>=400){
			this.isTopBtn=true
		}
		if(e.scrollTop<=100){
			this.isTopBtn=false
		}
	},
}
</script>
<style>
page{
	background: #fff;
}
.grace-body{
	margin-bottom:60rpx;
	border-bottom: 1px solid #eee;
}
.ucenter-face{width:100rpx !important; height:100rpx !important;}
.ucenter-face-image{width:100rpx !important; height:100rpx !important;}
.ucenter-line{height:12rpx; background-color:#F4F5F6; margin:16rpx 0;}
</style>